<template>
  <div v-show="this.routeLoading">
    <div class="loading-bg"  @click.stop="hideLoading"></div>
    <div class="loading" :class="{'loading-center':this.routeLoading}" @click.stop="">
      <img width="24" height="24" src="../../../static/img/loading.gif">
      <p class="desc">{{title}}</p>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  import {mapGetters,mapMutations} from 'vuex'
  export default {
    props: {
      title: {
        type: String,
        default: 'Loading...'
      }
    },
    computed :{
      ...mapGetters([
        'routeLoading'
      ])
    },
    methods:{
     hideLoading() {
      // this.setLoading(false);
     },
      ...mapMutations({
         setLoading : 'SET_ROUTE_LOADING'
      })
    }
  }
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  .loading-bg
    position:fixed
    top: 0
    background rgba(0,0,0,.08)
    width: 100%
    height:100%
    z-index 9999
    margin-left:auto;
    margin-right:auto;
  .loading
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width 100%
    text-align: center;
    z-index 10000
  .loading-center
    position:fixed
    top:50%
    margin:-24px auto 0
  .desc
    line-height: 20px
    font-size: $font-size-small
    color: #ccc
</style>
